<template>
  <div style="width: 20%; margin-left: 2%">
    <div class="questions-right">
      <div class="quesright-first">
        <div class="newword">
          <el-button class="newword-btn" @click="showPublish()"
            >发布问答</el-button
          >
        </div>
        <hr style="width: 100%; height: 1px; margin-top: 2%" />
        <img src="../images/spring.png" />
        <img src="../images/spring.png" />
        <img src="../images/spring.png" />
        <img src="../images/spring.png" />
      </div>
      <div class="quesright-second" v-show="isVisible">
        <div class="hot-questions">
          <div class="hot-quest"></div>
          <p>热点问题</p>
        </div>
        <hr style="width: 100%; height: 1px; margin-top: 2%" />
        <div class="hot-passage">
          <ul>
            <li v-for="item in questionshotBarList.slice(0,6)" :key="item.questionId">
              <router-link
                :to="{
                  path: '/question-info',
                  query: { questionId: item.questionId },
                }"
              >
                <i class="iconfont">&#xe626;</i>
                <p>{{ item.questionTitle }}</p>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div id="giveout" class="giveout giveout-none">
      <el-form 
      :model="questionForm"
      :rules="questionRule"
      ref="questionForm">
        <el-form-item prop="questionTitle">
          <div class="giveout-theme">
            <p>主题:</p>
            <el-input
            v-model="questionForm.questionTitle"
              type="textarea"
              rows="2"
              resize="none"
              style="margin-bottom: 10px"
            />
          </div>
        </el-form-item>
        <hr />
        <el-form-item prop="questionContent">
          <div class="giveout-content">
            <p>内容:</p>
            <el-input
            v-model="questionForm.questionContent"
              type="textarea"
              resize="none"
              rows="8"
              style="margin-bottom: 15px"
            />
          </div>
        </el-form-item>
        <hr />
        <div class="giveout-btn" style="height: 80px;align-item:center;">
          <el-form-item prop="questionNickname">
            <el-input
              placeholder="姓名"
              v-model="questionForm.questionNickname"
              style="width:95% !important; border-radius: 10px; margin-left: 5%;margin-top:10px;"
              minlength="30%"
            />
          </el-form-item>
          <el-form-item prop="questionEmail">
            <el-input
              placeholder="邮箱"
              v-model="questionForm.questionEmail"
              style="width:95% !important;border-radius: 10px; margin-left: 5%;margin-top:10px;"
            />
          </el-form-item>
          <el-form-item>
            <el-switch
              style="margin-left: 10%;width:140px;margin-top:10px;"
              v-model="questionForm.isPublish"
              active-text="是否公开"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
          <el-button
            @click="closePublish()"
            type="warning"
            style="margin-right: 10px; margin-left: 15%"
            round
            >退出</el-button
          >
          <el-button type="danger" style="margin-right: 10px" round @click.native="addQuestionFun()"
            >确认发布</el-button
          >
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import "@/assets/css/questions.css";
import { getQuestionsHotList, addQuestion } from "@/api/releaseNav";

const question = {
  questionId: null,
  questionEmail: null,
  questionPassword: null,
  questionNickname: null,
  questionTitle: null,
  questionContent: null,
  questionStatus: null,
  questionPhotoUrl: null,
  isPublish: 0,
  isComment: 1,
};
export default {
  name: "releaseNav",
  data() {
     var checkEmail = (rule, value, callback) => {
      var reg =
        /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (!value) {
        //如果输入为空直接返回
        callback();
      } else {
        //如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。
        if (reg.test(value)) {
          //匹配成功返回
          callback();
        } else {
          //匹配不成功返回错误显示
          callback(new Error("网址格式有问题！"));
        }
      }
    };
    return {
      typeId: 11,
      questionForm: Object.assign({}, question),
      questionshotBarList: [],
      questionRule: {
        questionTitle: [
          { required: true, message: "请输入主题", trigger: "blur" },
          {
            min: 1,
            max: 300,
            message: "长度在 1 到 300 个字符",
            trigger: "blur",
          },
        ],
        questionContent: [
          { required: true, message: "请输入内容", trigger: "blur" },
          {
            min: 1,
            max: 1024,
            message: "长度在 1 到 1024 个字符",
            trigger: "blur",
          },
        ],
        questionNickname: [
          { required: true, message: "请输入你的姓名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
     questionEmail: [{ required: true, validator: checkEmail, trigger: "blur" }],
      },
    };
  },
  props: ["isVisible"],
  created() {
    this.getQuestionsHotListFun();
  },

  methods: {
    getQuestionsHotListFun() {
      getQuestionsHotList().then((response) => {
        this.questionshotBarList = response.data;
      });
    },
    showPublish() {
      // 设置显示效果 默认是隐藏的
      var giveout = document.getElementById("giveout");
      // 删除隐藏
      giveout.classList.remove("giveout-none");
    },

    closePublish() {
      // 设置关闭效果
      // 设置隐藏效果
      var giveout = document.getElementById("giveout");
      // 删除隐藏
      giveout.classList.add("giveout-none");
    },
    addQuestionFun(){
      this.$refs.questionForm.validate((valid) => {
        if (valid) {
          addQuestion(this.questionForm, this.typeId).then((response) => {
            if (response.code == 200) {
              this.$message({
                message: "发布成功，谢谢你的分享！",
                type: "success",
              });
            } else {
              this.$message({
                message: "发布失败！",
                type: "warning",
              });
            }
          })
          

        }
        this.$refs.questionInfo.resetFields();
      })
    }
    
  },
};
</script>

<style>
.el-form-item {
  margin-bottom: 20px;
}

</style>
